<template>
    <div class="app-left">
        <div class="user">
            <div class="title">
                <p class="name">保 洁 阿 姨</p>
                <i class="ri-vimeo-fill" />
            </div>
            <div class="email">547241650@qq.com</div>
            <div class="text">
                <p>luzhou·sichuan</p>
                <p>拥有60+年的前端设计经验</p>
                <p>Web网页设计:70888820</p>
            </div>
            <RouterLink to="/about">
                <div class="look">
                    <i class="ri-user-line" />
                    <p>关于更多博客信息</p>
                </div>
            </RouterLink>
        </div>
        <div class="video">
            <div class="title">
                <p><span>{{ total }}</span>个视频</p>
                <p>Video list</p>
            </div>
            <div class="data">
                <div v-for="(item, i) in list" :key="i" class="item">
                    <NuxtLink :to="{ name: 'post-id', params: { id: item.id } }">
                        <ImageLoading v-if="item.cover" class="cover" :url="item.cover" />
                        <ImageLoading v-else class="cover" :url="randomImgs.baseURL + i" />
                        <div class="overlay">
                            <i class="ri-play-fill" />
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import './app.less'

/**
 * 视频获取
 */
const { data } = await articleVideoApi()
const list = computed(() => data.value?.data?.list ?? [])
const total = computed(() => data.value?.data?.total ?? 0)
</script>